<template>
  <basic-container>
    <XmTable :config="tableConfig" :noWatchParams="noWatchParams" class="table" ref="table" >
      <div slot="filter">
        <el-form class="fl" :inline="true" ref="form" :model="noWatchParams">
          <el-form-item label="用户名称">
            <el-input v-model.trim="noWatchParams.userName" size="small" placeholder="请输入用户全名"></el-input>
          </el-form-item>
          <el-form-item label="导出时间">
            <el-date-picker v-model="time" type="datetimerange" range-separator="至" start-placeholder="开始时间"
              end-placeholder="结束时间" size='small' :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd HH:mm:ss"
              format="yyyy-MM-dd HH:mm:ss" clearable align="right">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="search"
              size="small"
              icon="el-icon-search"
              style="margin-left: 10px;"
            >搜索</el-button>
            <el-button
              @click="reset"
              size="small"
              icon="el-icon-delete"
              style="margin-left: 10px;"
            >清空</el-button>
          </el-form-item>
        </el-form>
        <div class="fr">
          <el-button icon="el-icon-plus" size="small" type="danger" @click="add" v-if="isAddBtn">新增</el-button>
        </div>
      </div>
    </XmTable>
  </basic-container>
</template>

<script>
import tableConfig from './config/table'
import {mapGetters} from "vuex";
export default {
  data() {
    return {
      tableConfig,
      noWatchParams: {
        userName: '',
        timeStart: this.dayjs(new Date()).format("YYYY-MM-DD 00:00:00"),
        timeEnd: this.dayjs(new Date()).format("YYYY-MM-DD 23:59:59"),
      },
      time: [
        this.dayjs(new Date()).format("YYYY-MM-DD 00:00:00"),
        this.dayjs(new Date()).format("YYYY-MM-DD 23:59:59"),
      ]
    };
  },
  computed: {
    ...mapGetters(["permission"]),
  },
  methods: {
    search() {
      if (this.time && this.time.length) {
        this.noWatchParams.timeStart = this.time[0]
        this.noWatchParams.timeEnd = this.time[1]
      } else {
        this.noWatchParams.timeStart = ''
        this.noWatchParams.timeEnd = ''
      }
      this.$refs.table.fetch()
    },
    reset() {
      this.noWatchParams = {
        userName: '',
        timeStart: '',
        timeEnd: '',
      }
      this.time = []
      this.$nextTick(() => {
        this.$refs.table.fetch()
      })
    },
  },
  components: {
  }
};
</script>
<style lang="scss" scoped>
.table {
  width: 99%;
  margin: 0 auto;
}
</style>